Get started with SWE

Review the foundations to learn about the key underpinning elements of the SWE. Explore the components and templates to familiarise yourself with the existing interface patterns that you can incorporate into your website.

To help with rapid design and development, the SWE is tightly integrated with the open source frontend  framework Bootstrap 4.

Design

Figma UI kit

A SWE UI kit is available in Figma and contains all the design assets required to quickly and easily create, share and test prototypes.

To reuse the styles, components and templates from the SWE UI kit across your Figma design files you'll need access to the library. Send your Figma account email address to online@qld.gov.au and we'll send you a direct invitation.

If you don't need access to the library, you can access the view-only SWE Figma UI kit.

HTML prototyping

You can also use the SWE codebase available on GitHub for HTML prototyping.

Develop

Installation instructions can be found on the GitHub repository: qg-web-template.

For the compiled/released assets copy of the codebase, see the GitHub repository: web-template-release.

The SWE includes jQuery and a suite of custom Javascript features.

The SWE is built on SASS. The source SCSS files are included in the NPM package (or the GitHub released assets repository) under /scss. The main SCSS files are:

qg-main.scss - the main file which includes all other SCSS fragments. Compiles to qg-main.css .

• scss-general/_qg-variables.scss - contains settings specific to Queensland Government
• scss-general/_bootstrap-variables - contains the standard set of Bootstrap variables
• scss-general/_bootstrap-loader.scss - loader for standard Bootstrap files, from node_modules/bootstrap-sass/
• scss-general/bootstrap/_mixins.scss - loader for Bootstrap mixins, from node_modules/bootstrap-sass/mixins/

qg-noscript.scss - contains styles for browsers not running javascript.

Publish on Squiz Matrix CMS

See Squiz Matrix CMS documentation and guides for instructions on how to add and configure SWE components on your web pages.